<template>
  <div class="navBar">
    <div class="nav">
      <div class="pcMenu">
       <ul>
         <li>
           <a href="#">主页</a>
         </li>
         <li>
           <a href="#" class="pcSubMenuTitle">新闻</a>
           <div class="pcSubMenu animated fadeInDown">
             <a href="#">中国新闻</a>
             <a href="#">世界新闻</a>
           </div>
         </li>
         <li>
           <a href="#">时政</a>
         </li>
         <li>
           <a href="#">国际</a>
         </li>
         <li>
           <a href="#">更多</a>
         </li>
         <li>
           <a><router-link to="/login">登录|注册</router-link></a>
         </li>
       </ul>
       <svg @click="toggle" t="1567084660005" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1269" width="200" height="200"><path d="M308.34588 143.964191h569.189827c11.250458 0 20.417497 9.16704 20.417497 20.417498v40.626653c0 11.250458-9.16704 20.417497-20.417497 20.417497H308.34588c-11.250458 0-20.417497-9.16704-20.417497-20.417497V164.381689c0-11.250458 9.16704-20.417497 20.417497-20.417498z" fill="#5C6BC0" p-id="1270"></path><path d="M308.34588 814.824822h569.189827c11.250458 0 20.417497 9.16704 20.417497 20.417497v40.626654c0 11.250458-9.16704 20.417497-20.417497 20.417497H308.34588c-11.250458 0-20.417497-9.16704-20.417497-20.417497v-40.626654c0-11.4588 9.16704-20.417497 20.417497-20.417497z" fill="#0288D1" p-id="1271"></path><path d="M308.34588 490.228281h569.189827c11.250458 0 20.417497 9.16704 20.417497 20.417497v40.626653c0 11.250458-9.16704 20.417497-20.417497 20.417498H308.34588c-11.250458 0-20.417497-9.16704-20.417497-20.417498V510.437436c0-11.250458 9.16704-20.209156 20.417497-20.209155z" fill="#7CB342" p-id="1272"></path><path d="M126.255137 143.964191h80.419939v81.253306H126.255137z" fill="#7986CB" p-id="1273"></path><path d="M126.255137 490.228281h80.419939v81.253306H126.255137z" fill="#9CCC65" p-id="1274"></path><path d="M126.255137 814.824822h80.419939v81.253306H126.255137z" fill="#29B6F6" p-id="1275"></path>
       </svg>
      </div>
      <transition enter-active-class="animated slideInDown" leave-active-class="animated slideInUp">
      <div class="mobileMenu" v-show='mobile'>
       <ul>
         <li>
           <a href="#">主页</a>
         </li>
         <li>
           <a href="#">新闻</a>
           <div class="mobileSubMenu" v-show="mobileSub">
             <a href="#">中国新闻</a>
             <a href="#">世界新闻</a>
           </div>
         </li>
         <li>
           <a href="#">时政</a>
         </li>
         <li>
           <a href="#">国际</a>
         </li>
         <li>
           <a href="#">更多</a>
         </li>
       </ul>
      </div>
      </transition>

    </div>
    <div style="clear:both">
      为了验证下拉菜单下拉不会向下顶走div;<br>
      为了验证下拉菜单下拉不会向下顶走div;<br>
      为了验证下拉菜单下拉不会向下顶走div;
    </div>

    <router-view /> 

  </div>


</template>



<script type="text/javascript">

export default{
  data(){
    return{
      mobile:false,
      pcSub:false,
      mobileSub:false
    }
  },
  //mounted(){
    //window.addEventListener('resize', this.Switching)
  //},
  methods:{
    toggle(){
      this.mobile = !this.mobile
    },
    //pcToggle(){
      //this.pcSub = !this.pcSub
    //},
    mobileToggle(){
      this.mobileSub = !this.mobileSub
    },
    //toLogin(){
      //this.$router.push('/')
    //}
    //Switching(){
      //let w = document.documentElement.clientWidth || document.body.clientWidth
      //if(w>879){
        //this.mobile = this.mobile
      //}
    //}
  }
}
  
</script>


<style type="text/css">
  .nav{
    height: 40px;
    background: white;
  }
  body{
    background: #eee;
    margin: 0px;
  }
  .pcMenu ul{
    list-style: none;
    margin: 0px;

  }
  .pcMenu li{
    float: left;
    display: block;
    line-height: 40px;
    margin-right: 20px;
    width:76px;
    text-align:center;

  }
  .pcMenu li:hover{
    background-color: black;
  }
  .pcMenu li:hover a{
    color: white;
  }
  .pcSubMenuTitle{
    position: relative;
    display: inline-block;
  }
  .pcSubMenu{
    border-style:solid;
    border-width:solid;
    border-color:red;
    width:70px;
    background:#f1d3d3;
    display:none;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    position: absolute;
  }
  .pcSubMenu a{
    display:block;
  }
  .pcSubMenu a:hover{
    background:#eee;
  }
  .pcMenu li:hover .pcSubMenu{
    display:block;
  }
  .pcMenu a{
    text-decoration: none;
    text-align: center;
  }
  .pcMenu svg{
    position: absolute;
    left: 20px; /*可以调整左右*/
    top: 7px;
    width: 28px;
    height: 28px;
    display: none;
  }
  .pcSubMenu{
    display:none;
  }

  /*媒体查询*/
  /*屏幕宽度小于878px的时候执行里面的css*/

  @media only screen and (max-width: 878px) {
    .pcMenu svg {
      display:block;
      position:relative;
      
    }
    .pcMenu ul{
      display: none;
    }
    .mobileMenu{
      border-style:solid;
      border-width:solid;
      border-color:red;
      width:120px;
      position:absolute;
      background:#eee;
      top:40px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }
    .mobileMenu ul{
      margin-top:0px;
      list-style:none;
      padding-left:0px;
      border-style:solid;
      border-width:solid;
      border-color:green;
      background:#eee;
    }
    .mobileMenu li{
      line-height:30px;
      text-align:center;
    }
    .mobileMenu li:hover{
      background:black;
    }
    .mobileMenu li:hover a{
      color:white;
    }
    .mobileMenu a{
      text-decoration:none;
    }
    .mobileSubMenu{
      width:114px;
      background:#f1d3d3;
      display:grid;
    }
    .mobileSubMenu a:hover{
      background:#868080;
    }
  }

  @media only screen and (min-width: 879px) {
    .mobileMenu{
      display:none;
    }
  }

</style>